<template>
    <div class="app-container" style="padding: 5px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;color: #0099ff;font-size: 16px;">同步条件设置</span><span style="color:red;margin-left: 3px;font-size: 12px;">[注：时间跨度建议不要跨越同步，耗时会比较长]</span>
        </div> 
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <!-- <el-form-item label="单据日期" prop="asyncTimeRange">
            <el-date-picker
              v-model="queryParams.asyncTimeRange"
              type="datetimerange"
              align="right"
              :picker-options="pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']" @change="changeAsyncTime">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item label="单据日期" prop="asyncTimeRange">
            <el-date-picker
              v-model="queryParams.asyncTimeRange"
              align="right"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-s-promotion" :disabled="btnflag" @click="asyncClck">确认同步</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <el-card class="box-card" style="margin-top: 10px;" v-if="resInfo!=null">
        <div slot="header" class="clearfix">
          <span style="font-weight: bold;color: #0099ff;font-size: 16px;">同步结果</span>
        </div> 
        <span style="color:green"> {{ start }} </span><br /><br />
        <span style="color:red"> {{ resInfo }} </span><br /><br />
        <span style="color:green"> {{ end }} </span>
      </el-card>
    </div>
  </template>
  <script>
  import { asyncClck } from "@/api/system/yongyou/yongyou";
  
  export default {
    name: "Clck",
    data() {
      return {
        btnflag: false,
        resInfo: null,
        start:null,
        end:null,
        queryParams: {
          asyncTimeRange: null,
          asyncTimeStart:null,
          asyncTimeEnd:null,
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
        },
      };
    },
    created() {
      
    },
    methods: {
        asyncClck(){
            this.resInfo = null;
            this.start = null;
            this.end = null;
            if(this.queryParams.asyncTimeRange==null){
                this.$message.error('请设置相应同步条件！');
                return false;
            }else{
                this.btnflag = true;
                this.queryParams.asyncTimeStart = this.queryParams.asyncTimeRange;
                asyncClck(this.queryParams).then(res =>{
                    if(res.code===200){
                        this.$modal.msgSuccess("同步成功");
                        this.btnflag = false;
                        this.resInfo = res.data.data;
                        this.start = res.data.start;
                        this.end = res.data.end;
                    }
                })
            }
        },
        changeAsyncTime(picker){
            this.queryParams.asyncTimeStart = picker[0];
            this.queryParams.asyncTimeEnd = picker[1];
        },
    }
  };
  </script>